<template>
  <div class="panel">
      <slot name="title" class="title">暂无标题</slot>
      <div class="content">
        <ul>
          <slot v-for="(item,index) in list" :row="item">   
              <li :key="index">{{item.name}}~~{{item.status==1?'阴性':'阳性'}} <button class="normal">阴</button></li>
          </slot>
         </ul>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[
                {
                    name:'张三',
                    status:1
                },
                {
                    name:'李四',
                    status:0
                },
                {
                    name:'王五',
                    status:1
                },
                {
                    name:'赵六',
                    status:1
                },
                {
                    name:'田七',
                    status:1
                }
            ]
        }
    }
};
</script>

<style lang="scss">
.panel {
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 250px;
  border: 1px solid #000;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  text-align: center;
  box-shadow: 15px 15px 15px gray;
  .title{
    height: 50px;
    background-color: skyblue;
  }
  .content{
    flex: 1;
  }
  .normal{
    width: 30px;
    height: 30px;
    border: none;
    border-radius:50% ;
    background-color: springgreen;
    color: blue;
  }
}
</style>